<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <canvas id="box" width=400 height=400></canvas>
</body>

</html>
<script>
  /** @type {HTMLCanvasElement} */ // 可以提示语法
  var box = document.getElementById('box');
  var gl = box.getContext("webgl");
  gl.clearColor(0.0, 1.0, 0.5, 0.5);
  console.log(gl.COLOR_BUFFER_BIT)
  gl.clear(gl.COLOR_BUFFER_BIT);

  /* 
    我们在 glsl中声明的两个变量mysize，myposition 怎么跟JS中的变量通讯
    1 - 通过 getAttribLocation(绑定的程序,glsl中的变量) 的返回值 赋予JS中的变量
      //这样的话 这个js变量对应的就是 mysize，myposition
    2 - 给变量赋值  通过   vertexAttrib[n]f 来付给对应变量的对应值
   */
  let vertextShaderSource = `
    attribute float mysize;
    attribute vec3  myposition;
    void main(){
      gl_PointSize = mysize;
      gl_Position = vec4(myposition,1.0);
    }
  `;
  let vertextShaderSource2 = `
    attribute float mysize;
    attribute vec4  myposition;
    void main(){
      gl_PointSize = mysize;
      gl_Position = vec4(myposition);
    }
  `;
  let fragmentShaderSource = `
    void main(){
      gl_FragColor = vec4(1.0,0.0,0.0,1.0);
    }
  `;
  let vertexshader = gl.createShader(gl.VERTEX_SHADER);
  let fragmentshader = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(vertexshader,vertextShaderSource2);
  gl.shaderSource(fragmentshader,fragmentShaderSource);

  gl.compileShader(vertexshader);
  gl.compileShader(fragmentshader);

  let program = gl.createProgram();
  gl.attachShader(program, vertexshader);
  gl.attachShader(program, fragmentshader);

  gl.linkProgram(program);
  gl.useProgram(program);

  // 把着色器语言中的mysize变量指向我们js中的myjsSize
  let myjsSize = gl.getAttribLocation(program,'mysize');
  // 把着色器语言中的myposition变量指向我们js中的myjsPosition
  let myjsPosition = gl.getAttribLocation(program,'myposition');
  console.log(myjsSize,myjsPosition)

  for(let i = 0; i < 4; i++){
    gl.vertexAttrib1f(myjsSize, 10.0*(i+1));
    gl.vertexAttrib4f(myjsPosition, 0.2*(i+1), 0.1*(i+1), 0.0,1.0)
    gl.drawArrays(gl.POINTS,0,1)
  }
</script>